<template>
	<view>
		<!-- 商品图片上传 -->
		<view class="cu-form-group mar-t20 pad20">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<8">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		
		<!-- 商品标题 -->
		<view class="">
			<view class="cu-form-group margin-top">
				<input maxlength="30" placeholder="请输入商品标题(长度<30)" name="input"></input>
			</view>
		</view>
		
		
		<view class="">
			<view class="cu-form-group margin-top">
				<view class="title">价格</view>
				<input type="number" placeholder="请输入价格" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">库存</view>
				<input type="number" placeholder="请输入库存" name="input"></input>
			</view>
			<uni-list>
				<uni-list-item @tap="navTo('../specifications/specifications')" :show-badge="true" title="商品规格"  />
			</uni-list>
		</view>
		
		<view class="margin-top">
			<view class="cu-form-group margin-top">
				<view class="title">分类目</view>
				<picker @change="categoryChange" :value="cIndex" :range="category">
					<view class="picker">
						{{cIndex>-1?category[cIndex]:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">分组</view>
				<picker @change="groupChange" :value="gIndex" :range="group">
					<view class="picker">
						{{gIndex>-1?group[gIndex]:'请选择'}}
					</view>
				</picker>
			</view>
			
		</view>
		
		<view class="margin-top">
			<uni-list>
				<uni-list-item @tap="navTo('../goodsGraphicDetails/goodsGraphicDetails')" :show-badge="true" title="商品详情图文" badge-text="请添加" />
			</uni-list>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				imgList: [],
				category: ['类目1', '类目2', '类目3'],
				group:['分组1','分组2','分组3'],
				gIndex: -1,
				cIndex:-1,
			}
		},
		onLoad(e) {
			console.log("商品id",e.gid)
		},
		methods: {
			navTo(url){
				uni.navigateTo({url});
			},
			groupChange(e){
				this.gIndex = e.detail.value
			},
			categoryChange(e){
				this.cIndex = e.detail.value
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
		}
	}
</script>

<style>
.grid{
	padding: 0;
}
.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
